import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { FileUploader } from '_ng2-file-upload@1.2.1@ng2-file-upload';

@Component({
  selector: 'app-set-user-img',
  templateUrl: './set-user-img.component.html',
  styleUrls: ['./set-user-img.component.css']
})
export class SetUserImgComponent implements OnInit {

  
  uploader:FileUploader = new FileUploader({
    url:"/tournote/fileUpload.php",    // 上传地址  
    method:"POST", // 请求类型    
    itemAlias:"uploadedfile" // 上传时的文件key   
  });

  constructor() { }
  
  ngOnInit() {
    }

    doUpload(){
      // 待上传文件队列
      console.log(this.uploader.queue);
      if(this.uploader.queue.length==0){
        console.log("没有待上传的文件");
        return;
      }
      // 单文件上传  ==>  传递的是哪一个文件 最后被添加到队列的文件
      let index = this.uploader.queue.length-1;
      this.uploader.queue[index].onSuccess = (response,status,headers)=>{
        if(status==200){
          console.log(response);
        }else{
          console.log("服务器不通，请稍后再试");
        }
      } 
      //开始上传
      this.uploader.queue[index].upload();
    }


  // 需要去导入 ElementRef 类型
  @ViewChild("file") myUpload:ElementRef;
  imgUrl:string = "../../../assets/img/user.jpeg";

  clickFile(){
    // console.log(1);
    // @ViewChild 获取当前组件html 中任意的 包装后的 页面元素
    // 可以理解为 id 选择器  @ViewChild(页面中元素的id)
    // console.log(this.myUpload);
    this.myUpload.nativeElement.click();
  }
  selectFile(event:any){
    let that = this;
    // 存在文件渲染的类
    let reader = new FileReader();
    reader.readAsDataURL(event.target.files[0]);
    console.log(event);
    // 不要使用 => 函数
    reader.onload = function(){
      that.imgUrl = this.result;
    }
  }

}
